<template>
  <div class="relative">
    <textarea
      ref="promptInput"
      name="custom-prompt-input"
      autocomplete="off"
      :rows="rows ?? 7"
      class="custom-prompt-input w-full mt-2"
      :spellcheck="false"
      :placeholder="placeholder"
      v-model="prompt"
    ></textarea>
    <n-icon @click="handleClear" :size="24" class="absolute bottom-2.6 right-1">
      <CloseRound />
    </n-icon>
  </div>
</template>

<script setup lang="ts">
import { CloseRound } from '@vicons/material'
const props = defineProps<{ rows?: number; defaultValue?: string; placeholder?: string }>()
const prompt = defineModel<string>({required: true})
prompt.value = props.defaultValue ?? ''
const handleClear = () => {
  prompt.value = ''
}
</script>

<style scoped>
.custom-prompt-input {
  background-color: black;
  border-width: 2px;
  border-radius: 8px;
  border-color: white;
  color: white;
  caret-color: var(--color-primary);
  padding: 0.85rem;
  padding-bottom: 1.4rem;
  font-size: 1rem;
  font-weight: 530;
  &:focus {
    border-color: var(--color-primary);
    outline: none;
  }
}
</style>
